﻿@{
    Layout = null;
    ViewData["Title"] = "PositionConfig";
}

<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />

<h1>职位设置PositionConfig</h1>
<div id="app">
    <el-row>
        <el-col :span="2"><el-button type="success" v-on:click="addkind">新增</el-button></el-col>
    </el-row>
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="major_kind_id"
                         label="职位分类编号"
                         width="160">
        </el-table-column>
        <el-table-column prop="major_kind_name"
                         label="职位分类名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="major_id"
                         label="职位编号"
                         width="160">
        </el-table-column>
        <el-table-column prop="major_name"
                         label="职位名称"
                         width="160">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button size="mini"
                           v-on:click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           v-on:click="handleDelete(scope.row.mak_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-on:size-change="handleSizeChange"
                   v-on:current-change="handleCurrentChange"
                   :current-page="pagecurrent"
                   :page-sizes="[3, 6, 9, 11]"
                   :page-size="pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="rows">
    </el-pagination>
    @*新增模态框*@
    <el-dialog title="新增职位"
               :visible.sync="AdialogVisible"
               width="55%">
        <el-form ref="form" :model="config_major" label-width="150px">
            <el-form-item label="职位类型">
                <el-select v-model="config_major_kind" value-key="major_kind_id" placeholder="请选择">
                    <el-option v-for="item in options"
                               :key="item.major_kind_id"
                               :label="item.major_kind_name"
                               :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职位编号">
                <el-input v-model="config_major.major_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="职位名称">
                <el-input v-model="config_major.major_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="AdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitAdd">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    @*修改模态框*@
    <el-dialog title="修改职位"
               :visible.sync="UdialogVisible"
               width="55%">
        <el-form ref="form" :model="config_major" label-width="150px">
            <el-form-item label="职位类型">
                <el-select v-model="config_major_kind" value-key="major_kind_id" placeholder="请选择" v-on:change="chan">
                    <el-option v-for="item in options"
                               :key="item.major_kind_id"
                               :label="item.major_kind_name"
                               :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职位编号">
                <el-input v-model="config_major.major_id" :disabled='true'></el-input>
            </el-form-item>
            <el-form-item label="职位名称">
                <el-input v-model="config_major.major_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="UdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitUdp">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //集合
            tableData: [],
            //实体类
            config_major: {
                mak_id: '',
                major_kind_id: '',
                major_kind_name: '',
                major_id: '',
                major_name: '',
                test_amount: ''
            },
            //下拉列表框集合
            options: [],
            //下拉列表框实例对象
            config_major_kind: {
            major_kind_id: '',
                major_kind_name: '',
            },
            //模态框开启标记
            AdialogVisible: false,
            UdialogVisible: false,
            //页面容量
            pagesize: 3,
            //页下标
            pagecurrent: 1,
            //总数据条数
            rows: 0,
        },
        methods: {
            //刷新
            fill() {
                axios.get('/PositionSet/PositionConfigFill?pgsize=' + this.pagesize + '&pgcurrent=' + this.pagecurrent).then((res) => {
                    this.tableData = res.data.tabs;
                    this.rows = res.data.rows;
                });
            },
            //查询职位分类集合
            pclassFill() {
                axios.get('/PositionSet/PositionClassFill1').then(res => {
                    this.options = res.data;
                });
            },
            //打开新增模态框
            addkind() {
                this.pclassFill();
                this.AdialogVisible = true;
                this.config_public_char = {};
            },
            //提交新增
            onSubmitAdd() {
                console.info("major_kind_id:",this.config_major_kind.major_kind_id,",major_kind_name:",this.config_major_kind.major_kind_name);
                axios.post('/PositionSet/PositionConfigAdd', {
                    //这里在获取时会自动类型转换成Int类型，数据库和后台需要String类型的 '01'
                    major_kind_id: '0'+ this.config_major_kind.major_kind_id,
                    major_kind_name: this.config_major_kind.major_kind_name,
                    major_name: this.config_major.major_name
                }).then(res => {
                    this.resultInform(res.data, "新增");
                    this.AdialogVisible = false;
                });
            },
            chan(val) {
                console.info("val:",val);
            },
            //修改编辑按钮，打开修改模态框
            handleEdit(row) {
                this.config_major_kind = {};
                //文本框的赋值回显
                this.config_major = row;
                //下拉列表框值回显绑定
                this.pclassFill();
                this.config_major_kind.major_kind_name = row.major_kind_name;
                this.config_major_kind.major_kind_id = row.major_kind_id.substr(1)+" ";
                this.UdialogVisible = true;
            },
            //提交修改
            onSubmitUdp() {
                console.info("提交：",this.config_major_kind);
                axios.post('/PositionSet/PositionConfigUpdate', {
                    mak_id:this.config_major.mak_id,
                    major_kind_id: '0'+ this.config_major_kind.major_kind_id.trim(),
                    major_kind_name: this.config_major_kind.major_kind_name,
                    major_id: this.config_major.major_id,
                    major_name: this.config_major.major_name,
                    test_amount: this.config_major.test_amount
                }).then(res => {
                    this.resultInform(res.data, "修改");
                    this.UdialogVisible = false;
                })
            },
            //删除按钮
            handleDelete(id) {
                this.$confirm("确定要删除该条职位信息吗？", "温馨提示").then(() => {
                    axios.delete('/PositionSet/PositionConfigDelete?mak_id=' + id).then((res) => {
                        this.resultInform(res.data, "删除");
                    })
                }).catch((error) => {
                    console.info("取消删除！" + error);
                })
            }, handleSizeChange(val) {
                //页面容量改变事件
                this.pagesize = val;
                this.fill();
            },
            handleCurrentChange(val) {
                //页下标改变事件
                this.pagecurrent = val;
                this.fill();
            },
            //结果通知方法
            resultInform(res, oper) {
                if (res > 0) {
                    this.openmessuc("职位信息" + oper + "成功！");
                    this.fill();
                } else {
                    this.openmeswar("职位信息" + oper + "有误！");
                }
            },
            //成功弹窗
            openmessuc: function(mes) {
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            //警告弹窗
            openmeswar: function(mes) {
                this.$message({
                    message: mes,
                    type: 'danger'
                });
            },
        },
        mounted: function() {
            this.fill();
        }
    });
</script>
